<template>
    <div id="map-main">
        <el-row>
            <el-col :xs="24" :md="12" :lg="12" :xl="12">
                <el-card>
                    <template #header>{{ mapTitle }}</template>
                    <div id="simple-map"></div>
                </el-card>
            </el-col>
            <el-col :xs="24" :md="12" :lg="12" :xl="12">
                <div class="introduction">
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque consectetur dolorem recusandae,
                        sed rerum
                        nisi unde magni est atque explicabo dolorum veritatis omnis temporibus sint modi molestiae
                        mollitia animi.
                        Natus!</p>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex dolorum, sint, assumenda in
                        obcaecati libero
                        reprehenderit officiis et dolorem voluptas architecto cupiditate tenetur labore odio iusto
                        laudantium
                        ducimus asperiores iste!</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores reprehenderit nemo earum,
                        aspernatur
                        maxime recusandae tempora qui saepe delectus repellat necessitatibus. Reprehenderit, molestias
                        nulla
                        voluptate quasi iure consectetur enim asperiores.</p>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'


import { onMounted, onUnmounted } from 'vue'
let map = null
interface Position {
    Lng: number,
    Ng: number,
}
const props = defineProps({
    mapTitle: {
        type: String,
        default: '小地图展示'
    },
    mapStyle: {
        type: String,
        default: 'normal',
    },
    positioning: {
        type: Object,
        default(rawProps) {
            return {
                Lng: 116.397428,
                Lat: 39.90923,
            }
        }
    },
    terrainEnable: {
        type: Boolean,
        default: false,
    }
})

onMounted(() => {
    console.log('挂载完毕')
    AMapLoader.load({
        key: '59c00a4f1f90273427b02569d19d1474',
        version: '2.0',
    }).then((AMap) => {
        const position = [props.positioning.Lng, props.positioning.Lat]
        map = new AMap.Map('simple-map', {
            viewMode: '2D',
            mapStyle: 'amap://styles/normal',
            zoom: 8.8,
            center: position,
            terrain: props.terrainEnable,
        })
    }).catch((e) => {
        console.log(e);

    })
})

onUnmounted(() => {
    console.log('销毁地图');
    map?.destroy()
})

</script>

<style scoped>
#simple-map {
    width: 400px;
    height: 400px;
    margin: 0 auto;
}

.amap-logo {
    visibility: hidden;
}

.amap-copyright {
    visibility: hidden;
}

.introduction {
    width: 480px;
    height: 500px;
    display: flex;
}

#map-main {
    background-color: var(--background-color);
    color: var(--text-color);
}
</style>
